<template>
  <div
    v-if="visible"
    class="managerTabs-container"
    id="managerTabs-container"
    :class="single ? 'single-managerTabsContanier' : 'managerTabsContanier'"
    @click.stop
  >
    <div class="managerTabs-contanier-header">
      <div class="managerTabs-contanier-title">{{ title }}</div>
      <div style="width: 276px; display: flex; align-items: center">
        <div class="buttonStyle" :style="single ? '' : ''">
          <el-button
            class="searchButton"
            type="primary"
            @click.stop="handleQuery"
            >搜索</el-button
          >
          <el-button class="refreshButton" @click.stop="resetQuery"
            >重置</el-button
          >
        </div>
        <div class="close" @click.stop="closeTabs">
          <el-icon :size="30" color="#c5e8ea"><Close /></el-icon>
        </div>
      </div>
    </div>
    <div class="managerTabs-contanier-line" style="width: 100%"></div>
    <div class="managerTabs-content">
      <el-form :model="queryParams" ref="queryRef">
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div :style="single ? 'display: flex;' : 'width: 80%;display: flex;'">
            <el-form-item
              label="申请人"
              prop="applicant"
              :style="single ? 'width: 315px' : 'width: 380px;'"
              class="arrange"
              :label-width="single ? '85px' : '110px'"
            >
              <el-input
                v-model="queryParams.applicant"
                placeholder="请输入申请人"
                maxlength="20"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="飞手"
              prop="flyingHand"
              :style="
                single
                  ? 'width: 365px; height: 34px'
                  : 'width: 464px;height: 34px'
              "
              class="arrange"
              :label-width="single ? '135px' : '193px'"
            >
              <el-input
                v-model="queryParams.flyingHand"
                placeholder="请输入飞手"
                maxlength="20"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="序列号"
              prop="aircraftId"
              :style="single ? 'width: 330px' : 'width: 390px;'"
              class="arrange"
              :label-width="single ? '100px' : '120px'"
            >
              <el-input
                v-model="queryParams.aircraftId"
                placeholder="请输入序列号"
                maxlength="20"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="任务类型"
              prop="taskNature"
              :style="
                single
                  ? 'width: 330px; height: 34px'
                  : 'width: 390px; height: 34px'
              "
              class="arrange arrange2"
              :label-width="single ? '100px' : '120px'"
            >
              <el-select
                v-model="queryParams.taskNature"
                class="construction"
                :teleported="false"
                placeholder="请选择任务类型"
                clearable
              >
                <el-option
                  v-for="dict in taskNatureList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div
            :style="
              single
                ? 'width: 100%;display: flex;'
                : 'width: 100%; display: flex;'
            "
          >
            <el-form-item
              label="申请人类型"
              prop="taskNature"
              :style="
                single
                  ? 'width: 315px; height: 34px'
                  : 'width: 380px; height: 34px'
              "
              class="arrange arrange2"
              :label-width="single ? 85 : 110"
            >
              <el-select
                v-model="queryParams.applyType"
                class="construction"
                :teleported="false"
                placeholder="请选择申请人类型"
                clearable
              >
                <el-option
                  v-for="dict in applicantList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="是否涉及管制区域"
              prop="focus"
              :style="
                single
                  ? 'width: 365px; height: 34px'
                  : 'width: 464px; height: 34px;margin-right: 0;'
              "
              class="arrange arrange2"
              :label-width="single ? '135px' : '193px'"
            >
              <el-select
                v-model="queryParams.focus"
                class="construction"
                :teleported="false"
                placeholder="请选择是否涉及管制区域"
                clearable
              >
                <el-option
                  v-for="dict in focusList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="执行状态"
              prop="executionStatus"
              :style="
                single
                  ? 'width: 330px; height: 34px;margin-right: 0;'
                  : 'width: 390px; height: 34px;margin-right: 0;'
              "
              class="arrange arrange2"
              :label-width="single ? '100px' : '120px'"
            >
              <el-select
                v-model="queryParams.executionStatus"
                class="construction"
                :teleported="false"
                placeholder="请选择飞行状态"
                clearable
              >
                <el-option
                  v-for="dict in flyTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="航空器类型"
              prop="status"
              :style="
                single
                  ? 'width: 330px; height: 34px;margin-right: 0;'
                  : 'width: 390px; height: 34px;margin-right: 0;'
              "
              class="arrange arrange2"
              :label-width="single ? '100px' : '120px'"
            >
              <el-select
                v-model="queryParams.parentAircraftType"
                class="construction"
                :teleported="false"
                placeholder="请选择航空器类型"
                @change="changeAircraft"
                clearable
              >
                <el-option
                  v-for="dict in parentAircraftTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label=""
              prop="status"
              :style="
                single
                  ? 'width: 212px; height: 34px;margin-right: 0;'
                  : 'width: 236px; height: 34px;margin-right: 0;'
              "
              class="arrange"
              :label-width="single ? '10px' : '10px'"
            >
              <el-select
                v-model="queryParams.aircraftType"
                class="construction"
                :teleported="false"
                placeholder="请选择航空器类型"
                clearable
              >
                <el-option
                  v-for="dict in aircraftTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div
            :style="
              single
                ? 'width: 100%;display: flex;'
                : 'width: 100%; display: flex;'
            "
          >
            <el-form-item
              label="飞行时间"
              prop="flyTime"
              :style="
                single
                  ? 'width: 680px; height: 34px'
                  : 'width: 844px; height: 34px'
              "
              class="arrange"
              :label-width="single ? '85px' : '110px'"
            >
              <el-date-picker
                style="height: 32px"
                v-model="flyTime"
                type="datetimerange"
                :teleported="false"
                :default-time="defaultTime2"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm"
                @change="getFlyTime"
                popper-class="noMoment"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        :height="single ? '347' : '306'"
        :style="single ? 'margin-bottom: 20px;' : 'margin-bottom: 1%'"
        :header-cell-style="headerStyle"
        style="background-color: transparent; width: 100%"
      >
        <el-table-column
          label=""
          :show-overflow-tooltip="true"
          width="15"
          prop="focus"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="!!row.focus && row.focus === 1">
              <img
                :src="VITE_BASE_PUBLICPATH + '/img/cockpit/focus.png'"
                style="width: 24px; height: 24px"
              />
            </div>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="查看" width="80" align="center">
          <template #default="{ row }">
            <img
              class="table-viewLook"
              :src="VITE_BASE_PUBLICPATH + '/img/cockpit/view.png'"
              @click.stop="viewLook(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          :width="single ? 60 : 60"
          type="index"
          :index="indexMethod"
          align="center"
        />
        <el-table-column
          label="状态"
          :show-overflow-tooltip="true"
          prop="type"
          width="150"
          align="center"
        >
          <template #default="{ row }">
            <span class="tag tag1" v-if="row.executionStatus === 1"
              >执行中</span
            >
            <span class="tag tag3" v-if="row.executionStatus === 2"
              >已完成</span
            >
            <span class="tag tag3" v-if="row.executionStatus === 3"
              >未执行</span
            >
            <span class="tag tag2" v-if="row.executionStatus === 0"
              >待执行</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="飞行计划申请编号"
          :width="single ? 180 : 240"
          :show-overflow-tooltip="true"
          prop="flyApplyCode"
          align="center"
        />
        <el-table-column
          label="申请人"
          :width="single ? 130 : 170"
          :show-overflow-tooltip="true"
          prop="applicant"
          align="center"
        />
        <el-table-column
          label="申请人类型"
          :width="single ? 110 : 110"
          :show-overflow-tooltip="true"
          prop="applyType"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="row.applyType === 0">个人</span>
            <span v-if="row.applyType === 1">机构</span>
          </template>
        </el-table-column>
        <el-table-column
          label="飞手"
          :width="single ? 180 : 250"
          :show-overflow-tooltip="true"
          prop="flyingHand"
          align="center"
        >
          <template #default="{ row }">
            <el-dropdown trigger="click">
              <div
                style="color: #ffffff !important; display: flex"
                class="el-dropdown-link"
              >
                <span style="pointer-events: none">{{
                  row.flyingHandList[0]
                }}</span>
                <div
                  v-if="row.flyingHandList.length > 1"
                  style="
                    margin-left: 10px;
                    display: flex;
                    justify-content: center;
                  "
                  @click="showClick1()"
                >
                  <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/downDrap.png'" />
                </div>
              </div>
              <template ref="dropdown1" #dropdown>
                <el-dropdown-menu
                  style="background-color: rgba(9, 27, 35, 0.8) !important"
                  class="dropdownPop"
                  slot="dropdown"
                >
                  <el-dropdown-item
                    v-for="item in row.flyingHandList"
                    :key="item"
                    style="color: #ffffff !important"
                  >
                    {{ item }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column
          label="航空器"
          :width="single ? 340 : 350"
          :show-overflow-tooltip="true"
          class-name="aircraftClass"
          prop="aircraftId"
          align="center"
        >
          <template #default="{ row }">
            <el-dropdown trigger="click">
              <div
                style="
                  color: #ffffff !important;
                  display: flex;
                  background: none !important;
                "
                class="el-dropdown-link"
              >
                <span
                  style="
                    pointer-events: none;
                    display: flex;
                    justify-content: center;
                  "
                  >{{
                    row.showSN
                      ? `${row.deviceModelList[0]} ${row.aircraftIdList[0]}`
                      : row.deviceModelList[0]
                  }}</span
                >
                <span
                  v-if="row.deviceModelList.length > 1"
                  style="margin-left: 10px"
                  @click="showClick2(row.deviceModelList)"
                  ><img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/downDrap.png'"
                /></span>
              </div>
              <template ref="dropdown2" #dropdown>
                <el-dropdown-menu
                  style="background-color: rgba(9, 27, 35, 0.8) !important"
                  class="dropdownPop"
                  slot="dropdown"
                >
                  <el-dropdown-item
                    v-for="(item, index) in row.aircraftIdList"
                    :key="item"
                    style="color: #ffffff !important"
                    >{{
                      row.showSN
                        ? `${row.deviceModelList[index]} ${item}`
                        : row.deviceModelList[index]
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column
          label="航空器类型"
          :show-overflow-tooltip="true"
          :width="single ? 130 : 120"
          prop="parentAircraftType"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="row.parentAircraftType === 'drone_type'">无人机</div>
            <div v-if="row.parentAircraftType === 'general_aviation_type'">
              通航
            </div>
            <div v-if="row.parentAircraftType === 'other_aircraft_type'">
              其他
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="飞行计划底高"
          :width="single ? 110 : 120"
          :show-overflow-tooltip="true"
          prop="lowHeight"
          align="center"
        >
          <template #default="{ row }">
            {{ row.lowHeight + "米" }}
          </template>
        </el-table-column>
        <el-table-column
          label="飞行计划顶高"
          :width="single ? 110 : 120"
          :show-overflow-tooltip="true"
          prop="topHeight"
          align="center"
        >
          <template #default="{ row }">
            {{ row.topHeight + "米" }}
          </template>
        </el-table-column>
        <el-table-column
          label="任务类型"
          :width="single ? 80 : 100"
          :show-overflow-tooltip="true"
          prop="taskNature"
          align="center"
        />
        <el-table-column
          label="飞行模式"
          :width="single ? 80 : 100"
          :show-overflow-tooltip="true"
          prop="flightMode"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="row.flightMode === 0">视距内</span>
            <span v-if="row.flightMode === 1">视距外</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操控模式"
          :width="single ? 80 : 100"
          :show-overflow-tooltip="true"
          prop="operatorMode"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="row.operatorMode === 0">遥控飞行</span>
            <span v-if="row.operatorMode === 1">自主飞行</span>
          </template>
        </el-table-column>
        <el-table-column
          label="飞行时间段"
          :show-overflow-tooltip="true"
          :width="single ? 260 : 350"
          prop="time"
          align="center"
        >
          <template #default="{ row }">
            {{ row.startTime }} - {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="审批文件"
          :show-overflow-tooltip="true"
          :width="single ? null : 90"
          prop="fileName"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="!!row.fileName && !!row.fileExtension">{{
              row.fileName + row.fileExtension
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :cockpit="true"
        layout="total, prev, pager,next, jumper"
        v-model:page="queryCurrent.pageNum"
        v-model:limit="queryCurrent.pageSize"
        @pagination="getListFun"
      />
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted, reactive, ref, toRefs } from "vue";
import { getExecutionList } from "/src/api/cockpit/flyPlan";
import { dataFormat } from "@/utils/format";
import { getAirspaceStatus } from "@/api/airSpace/airSpaceSetUp";
import useFlightTaskStore from "@/store/modules/flightTask";
const flyTaskStore = useFlightTaskStore();
const emit = defineEmits([
  "ManagerTabsExpand",
  "changeIsShowDetail",
  "managerVisibleClose",
]);
const VITE_BASE_PUBLICPATH = import.meta.env.VITE_BASE_PUBLICPATH;
const applicantList = ref([
  {
    dictLabel: "个人",
    dictValue: 0,
  },
  {
    dictLabel: "机构",
    dictValue: 1,
  },
]);
const taskNatureList = ref([]);
const flyTypeList = ref([]);
const parentAircraftTypeList = ref([]);
const aircraftTypeList = ref([]);
const total = ref(1);
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
const defaultTime2 = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
const dropdown1 = ref();
const dropdown2 = ref();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  single: {
    type: Boolean,
    default: false,
  },
});
const flyTime = ref();
const data = reactive({
  queryParams: {
    applicant: null,
    flyingHand: null,
    taskNature: "0",
    executionStatus: null,
    params: {},
    aircraftId: null,
    startTime: null,
    endTime: null,
    applyType: null,
    aircraftType: null,
    parentAircraftType: null,
  },
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
  tableData: [],
  focusList: [
    {
      dictLabel: "是",
      dictValue: 1,
    },
    {
      dictLabel: "否",
      dictValue: 0,
    },
  ],
});

const { queryParams, queryCurrent, tableData, focusList } = toRefs(data);

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

// 表格头部样式
function headerStyle({ row, rowIndex }) {
  if (rowIndex === 0) {
    if (props.single) {
      return {
        backgroundColor: "rgba(0, 114, 202, 0.3) !important",
        color: "#ffffff",
        fontSize: "14px",
      };
    } else {
      return {
        backgroundColor: "rgba(0, 114, 202, 0.3) !important",
        color: "#ffffff",
        fontSize: "16px",
      };
    }
  }
}

// 飞行时间
function getFlyTime(val) {
  if (val) {
    queryParams.value.startTime = dataFormat(val[0], "YYYY-MM-DD HH:mm:ss");
    queryParams.value.endTime = dataFormat(val[1], "YYYY-MM-DD HH:mm:ss");
  } else {
    queryParams.value.startTime = null;
    queryParams.value.endTime = null;
  }
}

// 列表条件查询
function getListFun() {
  let taskNature = getTaskNature(queryParams.value.taskNature);
  getExecutionList(
    { ...queryParams.value, taskNature },
    queryCurrent.value
  ).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows;
      tableData.value.map((item) => {
        item["flyingHandList"] = item.flyingHand.split(",");
        item["aircraftIdList"] = item.aircraftId.split(",");
        item["deviceModelList"] = item.deviceModel.split(",");
        item["showSN"] = item.aircraftType === 0 || item.aircraftType === 4;
        // console.log();
      });
      total.value = res.total;
    }
  });
}

// 搜索
function handleQuery() {
  getListFun();
}

// 重置
function resetQuery() {
  queryParams.value = {
    applicant: null,
    flyingHand: null,
    taskNature: "0",
    executionStatus: null,
    params: {},
    aircraftId: null,
    startTime: null,
    endTime: null,
    focus: null,
  };
  flyTime.value = null;
  queryCurrent.value.pageNum = 1;
  queryCurrent.value.pageSize = 10;
  getListFun();
}

// 关闭弹窗
function closeTabs() {
  queryParams.value = {
    applicant: null,
    flyingHand: null,
    taskNature: "0",
    executionStatus: null,
    params: {},
    aircraftId: null,
    startTime: null,
    endTime: null,
    focus: null,
  };
  flyTime.value = null;
  queryCurrent.value.pageNum = 1;
  queryCurrent.value.pageSize = 10;
  emit("managerVisibleClose");
}

// 获取任务类型列表
function getTaskNatureList() {
  getAirspaceStatus("task_nature").then((res) => {
    if (res.code === 200) {
      taskNatureList.value = res.data;
    }
  });
}

// 获取任务类型
function getTaskNature(val) {
  const label = taskNatureList.value.find((item) => item.dictValue === val);
  return label.dictLabel === "全部" ? "" : label.dictLabel;
}

// 执行状态
function getFlyTypeList() {
  getAirspaceStatus("execution_status").then((res) => {
    if (res.code === 200) {
      flyTypeList.value = res.data;
    }
  });
}

function getParentAircraftTypeList() {
  getAirspaceStatus("aircraft_type").then((res) => {
    if (res.code === 200) {
      parentAircraftTypeList.value = res.data;
      parentAircraftTypeList.value.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    }
  });
}

function changeAircraft() {
  if (!queryParams.value.parentAircraftType) return;
  getAirspaceStatus(queryParams.value.parentAircraftType).then((res) => {
    if (res.code === 200) {
      aircraftTypeList.value = res.data;
      queryParams.value.aircraftType = null;
      aircraftTypeList.value.unshift({
        dictValue: null,
        dictLabel: "全部",
      });
    }
  });
}

// 点击查看--动画
function viewLook(val) {
    emit("changeIsShowDetail");
    flyTaskStore.openTabs(
      "fourth",
      val.aircraftId,
      val.flyApplyId,
      val.flyingId
    );
    // setTimeout(() => {
      emit("ManagerTabsExpand", true);
      window.tabsType = true;
    // }, 2000);

    if (props.single == true) {
      document.styleSheets[0].insertRule(
        `@keyframes arrow {
      100%{
        transform: translate(20px) scale(0); opacity: 0;}
      }`,
        0
      );
      document.getElementsByClassName(
        "managerTabs-container"
      )[0].style.animation = "arrow 0.5s ease 1 forwards";
    } else {
      document.styleSheets[0].insertRule(
        `@keyframes arrow {
    100%{
      transform: translate(700px) scale(0); opacity: 0;}
    }`,
        0
      );
      document.getElementsByClassName(
        "managerTabs-container"
      )[0].style.animation = "arrow 0.5s ease 1 forwards";
    }
  }

function showClick1() {
  console.log(dropdown1.value);
  if (!dropdown1.value) return;
  dropdown1.value.handleOpen();
}

function showClick2() {
  if (!dropdown2.value) return;
  dropdown2.value.handleOpen();
}

defineExpose({
  getListFun,
  //演示导出
  viewLook,
});

onMounted(() => {
  getTaskNatureList();
  getFlyTypeList();
  getParentAircraftTypeList();
  // getListFun();
});
</script>

<style lang="scss" scoped>
.single-managerTabsContanier {
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translate(-50%, 20%);
  z-index: 100;
  //width: 1800px;
  width: 93%;
  height: 684px;
  padding: 25px 34px;
  border-radius: 7px;
  background-color: rgba(9, 27, 35, 0.8);
  border: 0.6px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 0.5s linear infinite;
  -webkit-animation: move_5 0.5s ease 1 forwards;
  /* 背景模糊化 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* filter: blur(5px); 内容全部模糊化 */

  .managerTabs-contanier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .managerTabs-contanier-title {
      color: #00fcff;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      letter-spacing: 0.1rem;
    }
    .buttonStyle {
      //position: relative;
      //top: -50%;
      //left: 41%;
      height: 33px;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
    }
    .close {
      width: 49px;
      height: 49px;
      position: relative;
      //top: -10px;
      top: 9px;
      right: -14px;
      cursor: pointer;

      img {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }
    }
  }
  .managerTabs-contanier-line {
    width: 2000px;
    height: 1px;
    border: 1px solid #00fcff;
    opacity: 0.3;
    margin-bottom: 20px;
  }
  .managerTabs-content {
    display: flex;
    flex-wrap: wrap;

    .arrange {
      //margin-right: 38px;
      display: flex;
      align-items: center;

      :deep .el-input__inner {
        color: #ffffff;
      }

      .construction {
        :deep .el-input__suffix {
          color: #fff;
        }
        :deep .el-select-dropdown {
          width: 100% !important;
          background-color: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select__popper.el-popper .el-popper__arrow::before {
          background: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          background: #44aeff;
          color: #fff;
        }
        :deep .el-select-dropdown__item.selected {
          // background: transparent !important;
          color: #fff !important;
        }
        :deep .el-select__caret {
          color: #fff !important;
        }
        :deep .el-select-dropdown__item {
          color: rgba(255, 255, 255, 0.65);
        }
        :deep .popper__arrow {
          display: none;
        }
      }
      .dataTimeConstruction {
        :deep .el-date-range-picker{
          background-color: rgba(9, 27, 35, 0.8);
        }
        :deep .el-date-range-picker {
          background: none;
        }
      }
    }
    :deep .el-date-editor .el-range__icon {
      width: 22px;
    }
    :deep .el-date-editor .el-range-input {
      width: 41%;
    }
    :deep .el-date-editor .el-range-input {
      color: #ffffff;
    }

    :deep .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    :deep .el-form-item--default .el-form-item__label {
      //width: 90px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    :deep .el-form-item--default .el-form-item__content {
      width: 300px;
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
    }
    :deep .el-input__wrapper {
      display: inline-flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      padding: 1px 11px;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: none;
    }
  }
  .table-container {
    height: 446px;

    .table-viewLook {
      width: 19px;
      height: 22px;
      cursor: pointer;
    }
    .tag {
      border-radius: 2px;
      font-size: 12px;
      padding: 2px 15px;
    }
    .tag1 {
      border: 1px rgba(60, 221, 255, 1) solid;
      background-color: rgba(60, 221, 255, 0.3);
    }
    .tag2 {
      border: 1px rgba(60, 255, 124, 1) solid;
      background-color: rgba(60, 255, 124, 0.3);
    }
    .tag3 {
      border: 1px rgba(255, 255, 255, 1) solid;
      background-color: rgba(255, 221, 255, 0.3);
    }
  }

  :deep .el-table__inner-wrapper::before {
    height: 0px;
  }

  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }
  :deep .el-table th {
    background-color: transparent !important;
    border: none;
    height: 36px;
    font-weight: 400;
  }
  :deep .el-table tr {
    background-color: transparent !important;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
    font-size: 12px;
    color: #ffffff;
  }
  :deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

  :deep .el-table__row td {
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
  }

  :deep .el-table tr {
    font-size: 12px;
  }

  //去掉表格内的线
  :deep .el-table th,
  :deep .el-table td {
    //border-bottom: none !important;
  }
}
.managerTabsContanier {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 20%);
  z-index: 100;
  width: 2110px;
  height: 647px;
  padding: 25px 34px;
  border-radius: 7px;
  background-color: rgba(9, 27, 35, 0.8);
  border: 0.6px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 2s linear infinite;
  -webkit-animation: move_4 2s ease 1 forwards;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  .managerTabs-contanier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .managerTabs-contanier-title {
      color: #00fcff;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      letter-spacing: 0.1rem;
    }

    .buttonStyle {
      //position: relative;
      //top: -50%;
      //left: 41%;
      height: 33px;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
    }

    .close {
      width: 49px;
      height: 49px;
      position: relative;
      right: -14px;
      top: 9px;
      cursor: pointer;

      img {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }
    }
  }
  .managerTabs-contanier-line {
    width: 2000px;
    height: 1px;
    border: 1px solid #00fcff;
    opacity: 0.3;
    margin-bottom: 20px;
  }
  .managerTabs-content {
    display: flex;
    flex-wrap: wrap;

    .arrange {
      //margin-right: 38px;
      display: flex;
      align-items: center;

      :deep .el-input__inner {
        color: #ffffff;
      }

      .construction {

        :deep .el-input__suffix {
          color: #fff;
        }
        :deep .el-select-dropdown {
          width: 100% !important;
          background-color: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select__popper.el-popper .el-popper__arrow::before {
          background: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          background: #44aeff;
          color: #fff;
        }
        :deep .el-select-dropdown__item.selected {
          // background: transparent !important;
          color: #fff !important;
        }
        :deep .el-select__caret {
          color: #fff !important;
        }
        :deep .el-select-dropdown__item {
          color: rgba(255, 255, 255, 0.65);
        }
        :deep .popper__arrow {
          display: none;
        }
      }
    }
    :deep .el-date-editor .el-range__icon {
      width: 22px;
    }
    :deep .el-date-editor .el-range-input {
      width: 41%;
    }
    :deep .el-date-editor .el-range-input {
      color: #ffffff;
    }

    :deep .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    :deep .el-form-item--default .el-form-item__label {
      //width: 100px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    :deep .el-form-item--default .el-form-item__content {
      width: 300px;
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
    }
    :deep .el-input__wrapper {
      display: inline-flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      padding: 1px 11px;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: none;
    }

    .buttonStyle {
      position: relative;
      //top: -50%;
      //left: 41%;
      height: 33px;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
      }
    }
  }
  .table-container {
    .table-viewLook {
      width: 19px;
      height: 22px;
    }
    .tag {
      border-radius: 2px;
      font-size: 12px;
      padding: 2px 15px;
    }
    .tag1 {
      border: 1px rgba(60, 221, 255, 1) solid;
      background-color: rgba(60, 221, 255, 0.3);
    }
    .tag2 {
      border: 1px rgba(60, 255, 124, 1) solid;
      background-color: rgba(60, 255, 124, 0.3);
    }
    .tag3 {
      border: 1px rgba(255, 255, 255, 1) solid;
      background-color: rgba(255, 221, 255, 0.3);
    }
  }

  :deep .el-table__inner-wrapper::before {
    height: 0px;
  }

  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }
  :deep .el-table th {
    background-color: transparent !important;
    border: none;
    height: 36px;
    font-weight: 400;
  }
  :deep .el-table tr {
    background-color: transparent !important;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
    font-size: 18px;
    color: #ffffff;
  }
  :deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

  :deep .el-table__row td {
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
  }

  //去掉表格内的线
  :deep .el-table th,
  :deep .el-table td {
    //border-bottom: none !important;
  }
}

@-webkit-keyframes move_4 {
  0% {
    -webkit-transform: translateX(1000px) scale(0);
    opacity: 0;
  }
}

@-webkit-keyframes move_5 {
  0% {
    -webkit-transform: translateX(0px) scale(0);
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    border: 0.6px rgba(255, 255, 255, 0.4) solid;
  }
  50% {
    border: 0.8px #ffffff solid;
  }
  100% {
    border: 0.6px rgba(255, 255, 255, 0.4) solid;
  }
}
</style>

<style lang="scss">
#managerTabs-container {
  position: absolute;
  z-index: 101;

  .arrange2 {
    .el-select {
      width: 100%;
    }
  }

  .el-popper.is-pure {
    left: -2px !important;
  }

  .el-popper.is-light,
  .el-popper.is-pure {
    background-color: transparent !important;
    .el-picker-panel.el-date-range-picker {
      background-color: transparent !important;
      color: #fff;

      .el-picker-panel__body-wrapper {
        background-color: rgba(9, 27, 35, 0.95) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        .available.in-range {
          .el-date-table-cell {
            background-color: rgba(255, 255, 255, 0.3) !important;
          }
        }
      }

      .el-picker-panel__footer {
        background-color: rgba(9, 27, 35, 0.8) !important;

        .el-button {
          color: #fff;
          background-color: rgba(9, 27, 35, 0.5) !important;
        }
      }
    }
  }

  .dropdownPop {
    border: 1px solid #44aeff;
    background-color: rgba(9, 27, 35, 0.8);
    color: #ffffff !important;

    .el-dropdown-menu__item:hover {
      border: 1px solid #44aeff;
      background-color: rgba(9, 27, 35, 0.8);
    }
    .popper__arrow {
      border: 1px solid #44aeff;
    }
    //.popper__arrow::after {
    //  background-color: rgba(9, 27, 35, 0.8);
    //  border: 1px solid #44aeff;
    //}
  }
  .single-managerTabsContanier {
    .el-table td.el-table__cell div {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2px;
    }
  }
  .managerTabsContanier {
    .el-table td.el-table__cell div {
      margin-top: 1px;
      box-sizing: border-box;
      font-size: 18px !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
